<template>
  <div class="box">
    <div>Child1子组件</div>
    <div>普通方法</div>
    <div>普通获取数据{{ $store.state.add }}</div>
    <div>辅助函数</div>
    <div>辅助函数获取{{ add }}</div>

    <hr />

    <div>修改state中的数据</div>
    <div>普通修改</div>
    <button @click="$store.dispatch('getAdd', add + 1)">异步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="asyncGetAdd">辅助函数修改state中的数据</button>

    <hr />

    <div>同步修改</div>
    <div>普通修改</div>
    <button @click="$store.commit('GET_ADD', add + 2)">同步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="GetAdd">辅助函数同步修改state中的数据</button>

    <hr />

    <div>getters的使用</div>

    <div>普通使用</div>
    <div>普通获取数据{{ $store.getters.newadd }}</div>
    <div>辅助函数使用</div>
    <div>辅助函数获取{{ newadd }}</div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Child1',
  computed: {
    // 注意: mapstate辅助函数需要配合计算属性来进行使用
    ...mapState(['add']),
    ...mapGetters(['newadd'])
  },
  methods: {
    // 注意: mapActions 和 mapMutations 需要配合methods配置项使用
    ...mapActions(['getAdd']),
    ...mapMutations(['GET_ADD']),

    asyncGetAdd() {
      this.getAdd(this.add + 1)
    },
    GetAdd() {
      this.GET_ADD(this.add + 2)
    }
  }
}
</script>

<style scoped></style>
